<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About Us - ASTRALION FRONTIER LIMITED</title>
  <!-- <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet"> -->
  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> -->
  <link rel="stylesheet" type="text/css" href="/static/css/why.css" />
  <link rel="stylesheet" type="text/css" href="/static/css/footer.css" />
  <link rel="stylesheet" type="text/css" href="/static/css/contact.css" />
  <link rel="stylesheet" type="text/css" href="/static/css/home.css" />
  <link rel="stylesheet" type="text/css" href="/static/css/css2.css" />
  <link rel="stylesheet" type="text/css" href="/static/css/all.min.css" />


</head>

<body>
  <%- include('partials/header') %>
    <section style="display: flex;justify-content: center; ">
      <div style="width:1200px;">
        <h1>About ASTRALION FRONTIER LIMITED</h1>
        <p style="font-size: 18px;">We are a forward-thinking legal technology company dedicated to providing innovative
          solutions for complex
          legal challenges. With our team of experts and cutting-edge technology, we deliver exceptional service to
          clients worldwide.</p>

      </div>

    </section>
    <section class="contact-content">
      <img src="/static/images/contact2.jpg" alt="Logo">
      <div class="contact-form">

        <h2>Contact Us</h2>
        <form id="contactForm">
          <div class="form-group">
            <label for="name">Full Name</label>
            <input type="text" id="name" name="name" required>
          </div>
          <div class="form-group">
            <label for="email">Email Address</label>
            <input type="email" id="email" name="email" required>
          </div>
          <div class="form-group">
            <label for="phone">Phone Number</label>
            <input type="tel" id="phone" name="phone" required>
          </div>
          <div class="form-group">
            <label for="caseType">Case Type</label>
            <input type="text" id="caseType" name="caseType" required>
          </div>
          <div class="form-group">
            <label for="message">Your Message</label>
            <textarea id="message" name="message" required></textarea>
          </div>
          <button type="submit">Send Message</button>
        </form>
      </div>
    </section>


    <!-- Footer Section -->
    <%- include('partials/footer') %>



      <script>
        document.getElementById('contactForm').addEventListener('submit', function (e) {
          e.preventDefault();
          // Simple form validation
          const name = document.getElementById('name').value.trim();
          const email = document.getElementById('email').value.trim();
          const phone = document.getElementById('phone').value.trim();
          const caseType = document.getElementById('caseType').value.trim();
          const message = document.getElementById('message').value.trim();

          if (!name || !email || !phone || !caseType || !message) {
            alert('Please fill in all fields');
            return;
          }

          // Email validation
          const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
          if (!emailRegex.test(email)) {
            alert('Please enter a valid email address');
            return;
          }

          // Phone validation (basic)
          const phoneRegex = /^\+?(\d[\s-]*){7,}$/;
          if (!phoneRegex.test(phone)) {
            alert('Please enter a valid phone number');
            return;
          }

          // Here you would typically send the form data to a server
          alert('Thank you for your message! We will contact you shortly.');
          this.reset();
        });
      </script>
</body>

</html>